import { useState, useEffect } from 'react'

/**
 * 歌单表单组件，用于添加和编辑歌单
 * 
 * @param {Object} props
 * @param {boolean} props.isVisible - 是否显示表单
 * @param {boolean} props.isEditing - 是否为编辑模式
 * @param {Object} props.initialData - 初始数据，编辑模式下使用
 * @param {Function} props.onSubmit - 提交表单的回调函数
 * @param {Function} props.onCancel - 取消操作的回调函数
 * @param {boolean} props.showOfficialOption - 是否显示官方推荐选项（仅管理员可见）
 */
function PlaylistForm({ 
  isVisible, 
  isEditing = false, 
  initialData = {}, 
  onSubmit, 
  onCancel, 
  showOfficialOption = false 
}) {
  const [formData, setFormData] = useState({
    name: '',
    description: '',
    coverImageUrl: 'https://s.5bb3.com/img4.kuwo.cn/star/starheads/300/s4s32/61/4066398673.jpg?param=100y100',
    isPublic: true,
    isOfficial: false
  })

  // 当初始数据或编辑状态改变时，更新表单数据
  useEffect(() => {
    if (isVisible && isEditing && initialData) {
      setFormData({
        name: initialData.name || '',
        description: initialData.description || '',
        coverImageUrl: initialData.coverImageUrl || 'https://s.5bb3.com/img4.kuwo.cn/star/starheads/300/s4s32/61/4066398673.jpg?param=100y100',
        isPublic: initialData.isPublic !== undefined ? initialData.isPublic : true,
        isOfficial: initialData.isOfficial !== undefined ? initialData.isOfficial : false
      })
    } else if (isVisible && !isEditing) {
      // 添加模式时重置表单
      setFormData({
        name: '',
        description: '',
        coverImageUrl: 'https://s.5bb3.com/img4.kuwo.cn/star/starheads/300/s4s32/61/4066398673.jpg?param=100y100',
        isPublic: true,
        isOfficial: false
      })
    }
  }, [isVisible, isEditing, initialData])

  // 处理表单输入变化
  const handleInputChange = (e) => {
    const { name, value, type, checked } = e.target
    setFormData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value
    }))
  }

  // 处理表单提交
  const handleSubmit = async (e) => {
    e.preventDefault()
    try {
      await onSubmit(formData)
    } catch (error) {
      console.error('提交表单失败:', error)
    }
  }

  // 如果表单不可见，不渲染任何内容
  if (!isVisible) {
    return null
  }

  return (
    <div className="song-form-modal">
      <div className="song-form">
        <h3>{isEditing ? '编辑歌单' : '添加歌单'}</h3>
        <form onSubmit={handleSubmit}>
          <div className="form-group">
            <label htmlFor="playlistName">歌单名称</label>
            <input
              type="text"
              id="playlistName"
              name="name"
              value={formData.name}
              onChange={handleInputChange}
              required
            />
          </div>
          <div className="form-group">
            <label htmlFor="playlistDesc">描述</label>
            <input
              type="text"
              id="playlistDesc"
              name="description"
              value={formData.description}
              onChange={handleInputChange}
            />
          </div>
          <div className="form-group">
            <label htmlFor="playlistCover">封面URL</label>
            <input
              type="text"
              id="playlistCover"
              name="coverImageUrl"
              value={formData.coverImageUrl}
              onChange={handleInputChange}
            />
          </div>
          <div className="form-group">
            <label>
              <input
                type="checkbox"
                name="isPublic"
                checked={formData.isPublic}
                onChange={handleInputChange}
              />
              是否公开
            </label>
          </div>
          
          {/* 仅在showOfficialOption为true时显示官方推荐选项 */}
          {showOfficialOption && (
            <div className="form-group">
              <label>
                <input
                  type="checkbox"
                  name="isOfficial"
                  checked={formData.isOfficial}
                  onChange={handleInputChange}
                />
                是否为官方推荐
              </label>
            </div>
          )}
          
          <div className="form-actions">
            <button type="button" onClick={onCancel}>取消</button>
            <button type="submit">保存</button>
          </div>
        </form>
      </div>
    </div>
  )
}

export default PlaylistForm